<template>
  <div class="edit-password-content">

    <authentication></authentication>

    <van-form @submit="onSubmit">
      <van-field v-model="password"
                 name="password"
                 type="password"
                 placeholder="请输入6位数字类型支付密码"
                 :rules="payPasswordRules"
                 clearable />
      <van-field v-model="password1"
                 type="password"
                 name="password1"
                 placeholder="请再次确认支付密码"
                 :rules="payPasswordRules"
                 clearable />
      <div style="margin: 16px;">
        <van-button round
                    block
                    native-type="submit"
                    class="submit-btn"
                    :disabled="!(password !== '' && password1 !== '')">
          提交
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import Authentication from '@/components/Authentication'
import { payPasswordRules } from '@/utils/formRules'
import { editPayPassword } from '@/api/memberInfo'
export default {
  name: 'EditPayPassword',
  data() {
    return {
      password: '',
      password1: '',
      payPasswordRules: Object.freeze(payPasswordRules),
      show: false
    }
  },
  components: {
    Authentication
  },
  methods: {
    onSubmit(formData) {
      if (this.password !== this.password1) {
        this.$toast({
          type: 'fail',
          message: '两次输入密码不一致，请检查后重试'
        })
      }
      editPayPassword(formData)
        .then(res => {
          this.$toast({
            type: 'success',
            message: res.message || '操作成功',
            onClose: () => {
              this.$router.go(-1)
            }
          })
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message || '修改失败，请重试'
          })
        })
    }
  }
}
</script>

<style lang="scss">
</style>
